<template>
	<div>


	<div class="login-content">

     <h3 style="font-weight: normal;">选择名称</h3>
   	<van-steps :active="active" style="margin-bottom: 12px;">
		  <van-step>选择地区</van-step>
		  <van-step>选择机构</van-step>
		  <van-step>选择名称</van-step>
		  <van-step>详细信息</van-step>
	</van-steps>
	<div class="btn_content">

	    <van-button type="default"
                  v-for="(item,i) in items"
                  :key="i"
                  @click="dianji(i,item.id)"
                  :class="{'active':isActive==i}" size="large" style="width: 91%;">{{item.name}}</van-button>

	</div>

  </div>
  <div class="btn_submit" >
  	   <van-button type="primary" @click="goback()" size="large" style="background-color: #CCCCCC;color: #fff;border:none">上一步</van-button>
  	   <van-button type="primary" @click="next()" size="large" style="background-color: #4C9FFD;border:none">下一步</van-button>
  </div>
  </div>

</template>
<script>
	export default{
		data(){
			return{
          cityId:"",
          active:2,
          isActive:-1,
          items:[],
          enterpriseValue:"",
          enterId:""
			}
		},
      mounted:function(){
          this.cityId = this.$route.query.cityId;
          this.enterpriseValue = this.$route.query.enterpriseValue;
          console.log(this.cityId);
          console.log(this.enterpriseValue);
          this.get_choiceName();
      },
		methods:{
        //上一步
        goback(){
            this.$router.push({
                path:'/changejigou',query:{cityId:this.cityId}
            })
        },
        //下一步
        next(){
            var enterId = this.enterId;
            if(enterId == ''){
                this.$toast("请选择名称");
                return false;
            }
            this.$router.push({
                path:'/infomation',
                query:{cityId:this.cityId,enterpriseValue:this.enterpriseValue,enterId:this.enterId}
            })
        },
        get_choiceName(){
            const that = this;
            this.$sendRequest('/login/choiceName',"cityId="+this.cityId+"&value="+this.enterpriseValue).then(function(res){
                console.log(res.data);
                that.items = res.data.result.enterprise;
                console.log(that.items);
            })
        },
        dianji(i,id){
            this.isActive = i;
            this.enterId = id;
        }

		}
	}
</script>

<style scoped="scoped">
	.login-content{
		padding: 12px;
	}

	.btn_content{
		text-align: left;


	}
	.btn_content button{
		width: 43%;
		margin-left: 15px;
		margin-bottom: 17px;
		border:1px solid #4C9FFD;
		color: #4C9FFD;
	}
	.btn_submit{
		display: flex;
		justify-content: space-around;
		position: absolute;
		bottom: 0;
		width: 100%;
	}
  .active{
    background: #4C9FFD;
    color: #ffffff !important;
  }

</style>
